/* 
  学习目标：受控组件-hooks
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useState } from 'react';

export default function App() {
  // 返回值是一个数组--[状态变量，更新状态的函数]

  // 1.声明state
  const [value, setValue] = useState('');

  // 3.声明方法用const
  const handleChange = (e) => {
    console.log('e----->', e);
    setValue(e.target.value);
  };

  return (
    <div>
      {/* 2.控制value */}
      <input type="text" value={value} onChange={handleChange} />
      {/* 简写方法 */}
      {/* <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> */}
    </div>
  );
}
